<template>
	<div class="">
		<h1>home 页面</h1>
		<button class="movebtn mt1" v-on:click="movebtn">获取数据</button>
		<div class="move-content mt1">
			<ul class="move-list clearfix">
				<li class="move-box" v-for="(o,index) in movedata" v-bind:item="o" v-bind:index="index" v-bind:key="o.id">
					<a target="_blank" :href="o.alt">
						<div class="moveimage"><img :src="o.images.large"></div>
						<div class="moveother">
							<div class="movetitle">{{ o.title }}</div>
							<p class="movescore">评分：{{ o.rating.average }}</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	
	export default{
		data(){
			return{
				movedata:[]
			}
		},
		methods: {
			movebtn(){
				let url = '/api/v2/movie/in_theaters';
				axios({
					method: 'get',
					url: url,
					headers: {
						'Content-Type': 'application/text'
					}
				}).then((res) => {
					this.movedata = res.data.subjects;
					console.log(res.data.subjects);
				})
			}
		}
	}
</script>

<style scoped>
	body{background: #fff;}
	h1{text-align: center;}
	.movebtn{width:7rem; height: 1.8rem; color: #fff; background-color: #42B983; border-radius: 4px;}
	.move-content{} 
	.move-box{width:28.6%; float: left; margin: 1rem 0 0 3%;}
	.move-box a{width: 100%; display: block;}
	.move-box img{width:100%; height: 9rem; display: block; background-color: #ccc;}
	.move-box .moveother{}
	.moveother .movetitle{height: 1.5rem; margin-top: .5rem; color: #190707; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}




</style>